<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学员信息表</title>
    <style>

    </style>
</head>

<body>

    <div id="app">
        <fieldset>
            <p>
                <span>姓名：</span>
                <input type="text" name="username" class="username">
            </p>
            <p><span>年龄:</span>
                <input type="text" name="age" class="age">
            </p>
            <p><span>性别：</span>
                <select name="sex" id="sex">
                    <option value="male">男</option>
                    <option value="female">女</option>
                </select>
            </p>
            <p><span>电话：</span>
                <input type="text">
            </p>
            <p>
                <button id="btn">提交</button>
            </p>
        </fieldset>
        <!-- 第二部分信息展示 -->
        <table>
            <thead>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>电话</th>
                <th>删除</th>
            </thead>
            <tbody class="tbody">

            </tbody>
        </table>

    </div>

    <script>
        let sex = document.getElementById('sex');
        let input = document.getElementsByTagName('input');
        let btn = document.getElementById('btn');
        let tbody = document.getElementsByTagName('tbody')[0];

        let arr = [];
        /* 点击事件 */
        btn.onclick = () => {
            let obj = {
                name: input[0].value, age: input[1].value,
                sex: sex.value, tel: input[2].value
            };
            /* 修改数组 */
            arr.push(obj)
            /* 统一渲染 */
            console.log(arr);
            render()
        }

        const del = (index) => {
            /* 修改数组 */
            // 解释：splice(index,1)删除数组中index位置的元素，返回被删除的元素
            arr.splice(index, 1)
            /* 统一渲染 */
            render()
        }

        const render = () => {
            let tr = ''
            arr.forEach((item, index) => {
                tr += ` <tr class="newTr">
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.sex}</td>
                    <td>${item.tel}</td>
                    <td onclick="del(${index})">删除</td>
                </tr>`
            })
            tbody.innerHTML = tr;
        }
    </script>
</body>

</html>